<template>
  <div class="bs-page-main">
    <div class="bs-banner">
      <div class="main-box">
        <div class="breadcrumb">
          <a href="">Home</a>/<a href="">Home</a>/<span>Best Sellers</span>
        </div>
        <div class="info-txt">
          <h4>Best Sellers</h4>
          <p>
            Our most wanted pieces. Upgrade your jewellery wardrobe with
            everything from iconic <span>chains</span> to
            <span
              >coin <br v-if="isMobile" />
              pendants</span
            >
            and <span>charm hoop</span> earrings.
          </p>
        </div>
      </div>
    </div>
    <div class="bs-list-box">
      <div class="main-box">
        <div class="filter-sort">
          <div class="filter-switch">
            <a @click="filterVisible = !filterVisible"
              ><i></i
              ><span> {{ filterVisible ? "Hide" : "Show" }} </span>Filters</a
            >
            <span class="count">99 items</span>
            <em class="f-counts">{{ filterNum }}</em>
          </div>
          <div class="sort-switch">
            <span>Sort By: </span
            ><b @click="sortVisible = !sortVisible"
              >{{ sortTap || "Category" }}<i></i
            ></b>
          </div>
          <div :class="sortVisible ? 'sort-select cur' : 'sort-select'">
            <div class="tit">
              Category <a href="javascript:" @click="sortVisible = false"></a>
            </div>
            <ul class="options">
              <li
                v-for="o in dict.sort"
                :key="o.id"
                :class="sortTap === o.name && 'cur'"
                @click="sortTap = o.name"
              >
                <i></i>{{ o.name }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div
      v-if="
        filterStyle.length ||
        filterMaterial.length ||
        filterColor.length ||
        filterOccasion.length
      "
      class="filter-current"
    >
      <div class="main-box">
        <ul class="filters">
          <li v-for="f in filterStyle" :key="f">
            {{ f }}
            <a
              href="javascript:"
              class="cl"
              @click="filterStyle.splice(filterStyle.indexOf(f), 1)"
            ></a>
          </li>
          <li v-for="f in filterMaterial" :key="f">
            {{ f
            }}<a
              href="javascript:"
              class="cl"
              @click="filterMaterial.splice(filterMaterial.indexOf(f), 1)"
            ></a>
          </li>
          <li v-for="f in filterColor" :key="f">
            {{ f
            }}<a
              href="javascript:"
              class="cl"
              @click="filterColor.splice(filterColor.indexOf(f), 1)"
            ></a>
          </li>
          <li v-for="f in filterOccasion" :key="f">
            {{ f
            }}<a
              href="javascript:"
              class="cl"
              @click="filterOccasion.splice(filterOccasion.indexOf(f), 1)"
            ></a>
          </li>
          <li class="lt">
            <a href="javascript:" class="clear-f" @click="clearAllFilter"
              >Clear All</a
            >
          </li>
        </ul>
      </div>
    </div>

    <div class="item-list-box">
      <div class="main-box">
        <ul class="item-list">
          <li class="item-cell">
            <div class="pic">
              <router-link to="/sellerDetail/1">
                <img src="/data/pic/ring2.jpg" alt="" class="poster" />
                <img src="/data/pic/ring1.png" alt="" class="hover" />
              </router-link>
              <a href="javascript:" class="add-fav"></a>
              <a href="javascript:" class="add-cart"
                ><span>ADD TO CART</span></a
              >
            </div>
            <div class="info">
              <div class="tit">Figure Slim Stacker Set</div>
              <div class="tag">Category</div>
              <div class="prize">$49.00</div>
              <div class="color">
                <span class="cur c1"></span>
                <span class="c2"></span>
                <span class="c3"></span>
              </div>
            </div>
          </li>
          <li class="item-cell">
            <div class="pic">
              <router-link to="/sellerDetail/1">
                <img src="/data/pic/ring3.jpg" alt="" class="poster" />
                <img src="/data/pic/ring1.png" alt="" class="hover" />
              </router-link>
              <a href="javascript:" class="add-fav"></a>
              <a href="javascript:" class="add-cart"
                ><span>ADD TO CART</span></a
              >
            </div>
            <div class="info">
              <div class="tit">Figure Slim Stacker Set</div>
              <div class="tag">Category</div>
              <div class="prize">$49.00</div>
              <div class="color">
                <span class="cur c1"></span>
                <span class="c2"></span>
                <span class="c3"></span>
              </div>
            </div>
          </li>
          <li class="item-cell">
            <div class="pic">
              <router-link to="/sellerDetail/1">
                <img src="/data/pic/ring4.jpg" alt="" class="poster" />
                <img src="/data/pic/ring1.png" alt="" class="hover" />
              </router-link>
              <a href="javascript:" class="add-fav"></a>
              <a href="javascript:" class="add-cart"
                ><span>ADD TO CART</span></a
              >
            </div>
            <div class="info">
              <div class="tit">Figure Slim Stacker Set</div>
              <div class="tag">Category</div>
              <div class="prize">$49.00</div>
              <div class="color">
                <span class="cur c1"></span>
                <span class="c2"></span>
                <span class="c3"></span>
              </div>
            </div>
          </li>
          <li class="item-cell">
            <div class="pic">
              <router-link to="/sellerDetail/1">
                <img src="/data/pic/ring2.jpg" alt="" class="poster" />
                <img src="/data/pic/ring1.png" alt="" class="hover" />
              </router-link>
              <a href="javascript:" class="add-fav"></a>
              <a href="javascript:" class="add-cart"
                ><span>ADD TO CART</span></a
              >
            </div>
            <div class="info">
              <div class="tit">Figure Slim Stacker Set</div>
              <div class="tag">Category</div>
              <div class="prize">$49.00</div>
              <div class="color">
                <span class="cur c1"></span>
                <span class="c2"></span>
                <span class="c3"></span>
              </div>
            </div>
          </li>
          <li class="item-cell">
            <div class="pic">
              <router-link to="/sellerDetail/1">
                <img src="/data/pic/ring3.jpg" alt="" class="poster" />
                <img src="/data/pic/ring1.png" alt="" class="hover" />
              </router-link>
              <a href="javascript:" class="add-fav"></a>
              <a href="javascript:" class="add-cart"
                ><span>ADD TO CART</span></a
              >
            </div>
            <div class="info">
              <div class="tit">Figure Slim Stacker Set</div>
              <div class="tag">Category</div>
              <div class="prize">$49.00</div>
              <div class="color">
                <span class="cur c1"></span>
                <span class="c2"></span>
                <span class="c3"></span>
              </div>
            </div>
          </li>
          <li class="item-cell">
            <div class="pic">
              <router-link to="/sellerDetail/1">
                <img src="/data/pic/ring4.jpg" alt="" class="poster" />
                <img src="/data/pic/ring1.png" alt="" class="hover" />
              </router-link>
              <a href="javascript:" class="add-fav"></a>
              <a href="javascript:" class="add-cart"
                ><span>ADD TO CART</span></a
              >
            </div>
            <div class="info">
              <div class="tit">Figure Slim Stacker Set</div>
              <div class="tag">Category</div>
              <div class="prize">$49.00</div>
              <div class="color">
                <span class="cur c1"></span>
                <span class="c2"></span>
                <span class="c3"></span>
              </div>
            </div>
          </li>
          <li class="item-cell">
            <div class="pic">
              <router-link to="/sellerDetail/1">
                <img src="/data/pic/ring2.jpg" alt="" class="poster" />
                <img src="/data/pic/ring1.png" alt="" class="hover" />
              </router-link>
              <a href="javascript:" class="add-fav"></a>
              <a href="javascript:" class="add-cart"
                ><span>ADD TO CART</span></a
              >
            </div>
            <div class="info">
              <div class="tit">Figure Slim Stacker Set</div>
              <div class="tag">Category</div>
              <div class="prize">$49.00</div>
              <div class="color">
                <span class="cur c1"></span>
                <span class="c2"></span>
                <span class="c3"></span>
              </div>
            </div>
          </li>
          <li class="item-cell">
            <div class="pic">
              <router-link to="/sellerDetail/1">
                <img src="/data/pic/ring3.jpg" alt="" class="poster" />
                <img src="/data/pic/ring1.png" alt="" class="hover" />
              </router-link>
              <a href="javascript:" class="add-fav"></a>
              <a href="javascript:" class="add-cart"
                ><span>ADD TO CART</span></a
              >
            </div>
            <div class="info">
              <div class="tit">Figure Slim Stacker Set</div>
              <div class="tag">Category</div>
              <div class="prize">$49.00</div>
              <div class="color">
                <span class="cur c1"></span>
                <span class="c2"></span>
                <span class="c3"></span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div
      :class="filterVisible ? 'bs-filter-selector cur' : 'bs-filter-selector'"
    >
      <div class="tit">
        Filters <a href="javascript:" @click="filterVisible = false"></a>
      </div>
      <div class="filter-cell">
        <div class="c-tit">
          <span
            >Style <em>{{ filterStyle.length }}</em></span
          >
          <a
            href="javascript:"
            @click="filterStyleVisible = !filterStyleVisible"
          ></a>
        </div>
        <div v-show="filterStyleVisible">
          <a
            href="javascript:"
            class="clear"
            @click="filterStyle.splice(0, filterStyle.length)"
            >Clear</a
          >
          <ul class="opt">
            <template v-for="(o, index) in dict.style">
              <li
                v-if="index < 4 || filterStyleShowAll"
                :key="o.id"
                :class="filterStyle.includes(o.name) && 'cur'"
                @click="multiCheck('filterStyle', o.name)"
              >
                <i></i>{{ o.name }}
              </li>
            </template>
          </ul>
          <a
            href="javascript:"
            class="more"
            @click="filterStyleShowAll = !filterStyleShowAll"
            >{{ filterStyleShowAll ? "Hide" : "View" }} More</a
          >
        </div>
      </div>
      <div class="filter-cell">
        <div class="c-tit">
          <span
            >Material <em>{{ filterMaterial.length }}</em></span
          >
          <a
            href="javascript:"
            @click="filterMaterialVisible = !filterMaterialVisible"
          ></a>
        </div>
        <div v-show="filterMaterialVisible">
          <a
            href="javascript:"
            class="clear"
            @click="filterMaterial.splice(0, filterMaterial.length)"
            >Clear</a
          >
          <ul class="opt">
            <template v-for="(o, index) in dict.material">
              <li
                v-if="index < 4 || filterMaterialShowAll"
                :key="o.id"
                :class="filterMaterial.includes(o.name) && 'cur'"
                @click="multiCheck('filterMaterial', o.name)"
              >
                <i></i>{{ o.name }}
              </li>
            </template>
          </ul>
          <a
            href="javascript:"
            class="more"
            @click="filterMaterialShowAll = !filterMaterialShowAll"
            >{{ filterMaterialShowAll ? "Hide" : "View" }} More</a
          >
        </div>
      </div>
      <div class="filter-cell">
        <div class="c-tit">
          <span
            >Color <em>{{ filterColor.length }}</em></span
          >
          <a
            href="javascript:"
            @click="filterColorVisible = !filterColorVisible"
          ></a>
        </div>
        <div v-show="filterColorVisible">
          <a
            href="javascript:"
            class="clear"
            @click="filterColor.splice(0, filterColor.length)"
            >Clear</a
          >
          <ul class="opt">
            <template v-for="(o, index) in dict.color">
              <li
                v-if="index < 4 || filterColorShowAll"
                :key="o.id"
                :class="filterColor.includes(o.name) && 'cur'"
                @click="multiCheck('filterColor', o.name)"
              >
                <i></i> <span class="cl" :style="{ background: o.id }"></span
                >{{ o.name }}
              </li>
            </template>
          </ul>
          <a
            href="javascript:"
            class="more"
            @click="filterColorShowAll = !filterColorShowAll"
            >{{ filterColorShowAll ? "Hide" : "View" }} More</a
          >
        </div>
      </div>
      <div class="filter-cell">
        <div class="c-tit">
          <span
            >Price <i class="clear" @click="computeRange(true)">Clear</i></span
          >
          <a
            href="javascript:"
            @click="filterPriceVisible = !filterPriceVisible"
          ></a>
        </div>
        <div v-show="filterPriceVisible" class="price-range">
          <div class="range-bar">
            <div id="rangeLine" class="line"></div>
            <div class="range-left">
              <i
                id="dragLeft"
                @touchstart="touchStart($event)"
                @touchmove="touchMove($event)"
                @mousedown="touchStart($event, 1)"
              ></i>
              <b>${{ filterPrice[0] }}.00</b>
            </div>
            <div class="range-right">
              <i
                id="dragRight"
                @touchstart="touchStartR($event)"
                @touchmove="touchMoveR($event)"
                @mousedown="touchStartR($event, 1)"
              ></i>
              <b>${{ filterPrice[1] }}.00</b>
            </div>
          </div>
        </div>
      </div>
      <div class="filter-cell">
        <div class="c-tit">
          <span
            >Occasion <em>{{ filterOccasion.length }}</em></span
          >
          <a
            href="javascript:"
            @click="filterOccasionVisible = !filterOccasionVisible"
          ></a>
        </div>
        <div v-show="filterOccasionVisible">
          <a
            href="javascript:"
            class="clear"
            @click="filterOccasion.splice(0, filterOccasion.length)"
            >Clear</a
          >
          <ul class="opt">
            <template v-for="(o, index) in dict.occasion">
              <li
                v-if="index < 4 || filterOccasionShowAll"
                :key="o.id"
                :class="filterOccasion.includes(o.name) && 'cur'"
                @click="multiCheck('Occasion', o.name)"
              >
                <i></i>{{ o.name }}
              </li>
            </template>
          </ul>
          <a
            href="javascript:"
            class="more"
            @click="filterOccasionShowAll = !filterOccasionShowAll"
            >{{ filterOccasionShowAll ? "Hide" : "View" }} More</a
          >
        </div>
      </div>
    </div>
    <div v-if="sortVisible" class="full-musk"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterVisible: false,
      sortVisible: false,
      sortTap: "",
      filterStyle: [],
      isMobile: false,
      filterStyleVisible: true,
      filterStyleShowAll: false,
      filterMaterial: [],
      filterMaterialVisible: true,
      filterMaterialShowAll: false,
      filterColor: [],
      filterColorVisible: true,
      filterColorShowAll: false,
      filterPrice: [49, 449],
      startX: 0,
      endX: 0,
      startXR: 0,
      endXR: 0,
      mouseDrag: false,
      filterPriceVisible: true,
      filterOccasion: [],
      filterOccasionVisible: true,
      filterOccasionShowAll: false,
      dict: {
        sort: [
          {
            name: "Relevance",
            id: "Relevance",
          },
          {
            name: "Price Low to High",
            id: "Price Low to High",
          },
          {
            name: "New In",
            id: "New In",
          },
          {
            name: "Price High to Low",
            id: "Price High to Low",
          },
        ],
        style: [
          {
            name: "Birthstone & Zodiac Necklaces",
            id: "Birthstone & Zodiac Necklaces",
          },
          {
            name: "Chain Bracelets",
            id: "Chain Bracelets",
          },
          {
            name: "Chain Necklaces",
            id: "Chain Necklaces",
          },
          {
            name: "Charm & Drop Earrings",
            id: "Charm & Drop Earrings",
          },
          {
            name: "Drop Earrings",
            id: "Drop Earrings",
          },
        ],
        material: [
          {
            name: "14ct Solid Yellow Gold",
            id: "14ct Solid Yellow Gold",
          },
          {
            name: "18ct Gold Plated",
            id: "18ct Gold Plated",
          },
          {
            name: "18ct Gold Vermeil",
            id: "18ct Gold Vermeil",
          },
          {
            name: "Mixed Metal",
            id: "Mixed Metal",
          },
          {
            name: "24ct Gold Plated",
            id: "24ct Gold Plated",
          },
        ],
        color: [
          {
            name: "Color1",
            id: "#FFD196",
          },
          {
            name: "Color2",
            id: "#DD9D88",
          },
          {
            name: "Color3",
            id: "#DFDFDF",
          },
          {
            name: "Color4",
            id: "#F3CAC3",
          },
          {
            name: "Color5",
            id: "#333333",
          },
        ],
        occasion: [
          {
            name: "Occasion1(23)",
            id: "Occasion1",
          },
          {
            name: "Occasion2(12)",
            id: "Occasion2",
          },
          {
            name: "Occasion3(9)",
            id: "Occasion3",
          },
          {
            name: "Occasion4(13)",
            id: "Occasion4",
          },
          {
            name: "Occasion5(33)",
            id: "Occasion5",
          },
        ],
      },
    };
  },
  computed: {
    filterNum() {
      let res = 0;
      if (this.filterStyle.length > 0) {
        res++;
      }
      if (this.filterMaterial.length > 0) {
        res++;
      }
      if (this.filterColor.length > 0) {
        res++;
      }
      if (this.filterOccasion.length > 0) {
        res++;
      }
      return res;
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const w = document.documentElement.clientWidth;
      const ele = document.getElementsByClassName("bs-filter-selector")[0];
      if (w > 800) {
        const top =
          document
            .getElementsByClassName("filter-switch")[0]
            .getBoundingClientRect().top + 30;
        ele.style.top = `${top}px`;
        ele.style.height = `calc(100vh - ${top}px)`;
      } else {
        this.isMobile = true;
      }
    },
    multiCheck(record, key) {
      if (this[record].includes(key)) {
        this[record].splice(this[record].indexOf(key), 1);
      } else {
        this[record].push(key);
      }
    },
    touchStart(e, flag) {
      const l = Number(
        window
          .getComputedStyle(document.getElementsByClassName("range-left")[0])
          .left.split("px")[0]
      );
      if (flag === 1) {
        this.mouseDrag = true;
        this.startX = e.clientX - l;
        document.body.addEventListener("mousemove", this.mouseEvent);
        document.body.addEventListener("mouseup", this.touchEnd);
      } else {
        this.startX = e.targetTouches[0].pageX - l;
        e.preventDefault();
      }
    },
    touchMove(e, flag) {
      if (flag === 1 && !this.mouseDrag) {
        return;
      }
      const w = Number(
        window
          .getComputedStyle(document.getElementsByClassName("price-range")[0])
          .width.split("px")[0]
      );
      const c = this.endX - this.startX;
      this.endX = flag === 1 ? e.clientX : e.targetTouches[0].pageX;
      if (c > w || c < 0) {
        return false;
      }
      document.getElementsByClassName("range-left")[0].style.left = `${c}px`;
      this.computeRange();
    },
    mouseEvent(e) {
      this.touchMove(e, 1);
    },
    mouseEventR(e) {
      this.touchMoveR(e, 1);
    },
    touchStartR(e, flag) {
      const l = Number(
        window
          .getComputedStyle(document.getElementsByClassName("range-right")[0])
          .left.split("px")[0]
      );
      if (flag === 1) {
        this.mouseDrag = true;
        this.startXR = e.clientX - l;
        document.body.addEventListener("mousemove", this.mouseEventR);
        document.body.addEventListener("mouseup", this.touchEnd);
      } else {
        this.startXR = e.targetTouches[0].pageX - l;
        e.preventDefault();
      }
    },
    touchMoveR(e, flag) {
      if (flag === 1 && !this.mouseDrag) {
        return;
      }
      const w = Number(
        window
          .getComputedStyle(document.getElementsByClassName("price-range")[0])
          .width.split("px")[0]
      );
      const c = this.endXR - this.startXR;
      this.endXR = flag === 1 ? e.clientX : e.targetTouches[0].pageX;
      if (c > w || c < 0) {
        return false;
      }
      document.getElementsByClassName("range-right")[0].style.left = `${c}px`;
      this.computeRange();
    },
    touchEnd() {
      document.body.removeEventListener("mousemove", this.mouseEventR);
      document.body.removeEventListener("mousemove", this.mouseEvent);
      document.body.removeEventListener("mouseup", this.touchEnd);
      this.mouseDrag = false;
    },
    computeRange(flag) {
      const numL = Number(
        window
          .getComputedStyle(document.getElementsByClassName("range-left")[0])
          .left.split("px")[0]
      );
      const numR = Number(
        window
          .getComputedStyle(document.getElementsByClassName("range-right")[0])
          .left.split("px")[0]
      );
      const w = Number(
        window
          .getComputedStyle(document.getElementsByClassName("price-range")[0])
          .width.split("px")[0]
      );
      const line = document.getElementById("rangeLine");
      const range = 400;
      if (flag === true) {
        this.filterPrice.splice(0, 2, ...[49, 449]);
        line.style.left = "0%";
        line.style.width = `100%`;
        this.endX = 0;
        this.endXR = 0;
        this.startX = 0;
        this.startXR = 0;
        document.getElementsByClassName("range-left")[0].style.left = `0px`;
        document.getElementsByClassName("range-right")[0].style.left = `100%`;
        return;
      }
      this.filterPrice.splice(0, 1, 49 + Math.floor((numL / w) * range));
      this.filterPrice.splice(1, 1, 49 + Math.floor((numR / w) * range));
      if (numL < numR) {
        line.style.left = `${numL}px`;
        line.style.width = `${numR - numL}px`;
      } else {
        line.style.left = `${numR}px`;
        line.style.width = `${numL - numR}px`;
      }
    },
    clearAllFilter() {
      this.filterStyle.splice(0, this.filterStyle.length);
      this.filterMaterial.splice(0, this.filterMaterial.length);
      this.filterColor.splice(0, this.filterColor.length);
      this.filterOccasion.splice(0, this.filterOccasion.length);
    },
  },
};
</script>
